<template>
	<view class="page">
		<!-- 用户信息区域 -->
		<view class="user-info">
			<view class="user-header">
				<view class="avatar-container" @click="editProfile">
					<image src="/static/svg/avatar-male.svg" class="avatar" />
					<view class="avatar-edit">
						<image src="/static/svg/camera.svg" class="camera-icon" />
					</view>
				</view>
				<view class="user-detail">
					<text class="username">小明同学</text>
					<text class="user-id">ID: 123456</text>
					<text class="user-desc">热爱生活，享受每一天 ✨</text>
				</view>
			</view>
		</view>

		<!-- 统计数据区域 -->
		<view class="stats-container">
			<view class="stats-item" @click="navigateToPoints">
				<text class="stats-number">2.8k</text>
				<text class="stats-label">积分</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item" @click="navigateToFollow">
				<text class="stats-number">128</text>
				<text class="stats-label">关注</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item" @click="navigateToFans">
				<text class="stats-number">365</text>
				<text class="stats-label">粉丝</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-number">42</text>
				<text class="stats-label">发布</text>
			</view>
		</view>

		<!-- 功能菜单区域 -->
		<view class="menu-section">
			<view class="menu-group">
				<view class="menu-item" @click="navigateTo('/pages/my/favorites/index')">
					<view class="menu-left">
						<image src="/static/svg/bookmark.svg" class="menu-icon" />
						<text class="menu-title">我的收藏</text>
					</view>
					<view class="menu-right">
						<text class="menu-badge">12</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				
				<view class="menu-item" @click="navigateTo('/pages/my/history/index')">
					<view class="menu-left">
						<image src="/static/svg/trend-up.svg" class="menu-icon" />
						<text class="menu-title">浏览历史</text>
					</view>
					<view class="menu-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				
				<view class="menu-item" @click="navigateTo('/pages/my/activities/index')">
					<view class="menu-left">
						<image src="/static/svg/walking.svg" class="menu-icon" />
						<text class="menu-title">我的活动</text>
					</view>
					<view class="menu-right">
						<text class="menu-badge">3</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="navigateTo('/pages/my/wallet/index')">
					<view class="menu-left">
						<image src="/static/svg/gift.svg" class="menu-icon" />
						<text class="menu-title">我的钱包</text>
					</view>
					<view class="menu-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
				
				<view class="menu-item" @click="navigateTo('/pages/my/settings/index')">
					<view class="menu-left">
						<image src="/static/svg/more.svg" class="menu-icon" />
						<text class="menu-title">设置</text>
					</view>
					<view class="menu-right">
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>

			<view class="menu-group">
				<view class="menu-item" @click="showAbout">
					<view class="menu-left">
						<image src="/static/svg/comprehensive.svg" class="menu-icon" />
						<text class="menu-title">关于我们</text>
					</view>
					<view class="menu-right">
						<text class="version-text">v1.0.0</text>
						<image src="/static/svg/dropdown.svg" class="arrow-icon" />
					</view>
				</view>
			</view>
		</view>

		<!-- 自定义底部导航 -->
		<bottom-nav />
	</view>
</template>

<script setup>
import BottomNav from '../../home/components/BottomNav.vue';

// 页面导航
const navigateTo = (url) => {
	// 这些页面已经开发完成，可以直接跳转
	const developedPages = [
		'/pages/my/favorites/index',
		'/pages/my/history/index', 
		'/pages/my/activities/index',
		'/pages/my/wallet/index',
		'/pages/my/settings/index'
	];
	
	if (developedPages.includes(url)) {
		uni.navigateTo({ url });
		return;
	}
	
	// 其他页面还在开发中
	uni.showToast({
		title: '功能开发中...',
		icon: 'none'
	});
};

// 跳转到积分明细页面
const navigateToPoints = () => {
	uni.navigateTo({
		url: '/pages/my/points/index'
	});
};

// 跳转到关注页面
const navigateToFollow = () => {
	uni.navigateTo({
		url: '/pages/my/follow/index'
	});
};

// 跳转到粉丝页面
const navigateToFans = () => {
	uni.navigateTo({
		url: '/pages/my/fans/index'
	});
};

// 显示关于信息
const showAbout = () => {
	uni.showModal({
		title: '关于应用',
		content: '这是一个基于uni-app开发的社区应用\n版本：v1.0.0\n© 2024 All Rights Reserved',
		showCancel: false,
		confirmText: '知道了'
	});
};

// 编辑个人资料
const editProfile = () => {
	uni.navigateTo({
		url: '/pages/my/profile/index'
	});
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
	padding-bottom: 90px;
}

/* 用户信息区域 */
.user-info {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40px 20px 30px;
	color: white;
}

.user-header {
	display: flex;
	align-items: center;
}

.avatar-container {
	position: relative;
	margin-right: 20px;
}

.avatar {
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background: rgba(255, 255, 255, 0.2);
	padding: 10px;
}

.avatar-edit {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 28px;
	height: 28px;
	background: #667eea;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
}

.camera-icon {
	width: 16px;
	height: 16px;
	filter: brightness(0) invert(1);
}

.user-detail {
	flex: 1;
}

.username {
	font-size: 24px;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
}

.user-id {
	font-size: 14px;
	opacity: 0.8;
	display: block;
	margin-bottom: 8px;
}

.user-desc {
	font-size: 16px;
	opacity: 0.9;
	display: block;
}

/* 统计数据区域 */
.stats-container {
	background: white;
	margin: -20px 20px 20px;
	border-radius: 16px;
	padding: 25px 0;
	display: flex;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.stats-item {
	flex: 1;
	text-align: center;
	transition: all 0.2s;
	cursor: pointer;
}

.stats-item:active {
	transform: scale(0.95);
	background: rgba(102, 126, 234, 0.1);
	border-radius: 12px;
}

.stats-number {
	font-size: 20px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5px;
}

.stats-label {
	font-size: 14px;
	color: #666;
	display: block;
}

.stats-divider {
	width: 1px;
	height: 30px;
	background: #f0f0f0;
	margin: auto 0;
}

/* 功能菜单区域 */
.menu-section {
	padding: 0 20px;
}

.menu-group {
	background: white;
	border-radius: 16px;
	margin-bottom: 20px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px;
	border-bottom: 1px solid #f8f9fa;
	transition: background-color 0.2s;
}

.menu-item:last-child {
	border-bottom: none;
}

.menu-item:active {
	background: #f8f9fa;
}

.menu-left {
	display: flex;
	align-items: center;
	flex: 1;
}

.menu-icon {
	width: 24px;
	height: 24px;
	margin-right: 15px;
	filter: opacity(0.7);
}

.menu-title {
	font-size: 16px;
	color: #333;
	font-weight: 500;
}

.menu-right {
	display: flex;
	align-items: center;
}

.menu-badge {
	background: #ff6b6b;
	color: white;
	font-size: 12px;
	padding: 2px 8px;
	border-radius: 10px;
	margin-right: 10px;
	min-width: 20px;
	text-align: center;
}

.version-text {
	font-size: 14px;
	color: #999;
	margin-right: 10px;
}

.arrow-icon {
	width: 16px;
	height: 16px;
	transform: rotate(90deg);
	filter: opacity(0.4);
}
</style>
